<template>
	<div class="xx">
		<div style="height: 100%;">
			<div style="display: flex;height: 100%;">
				<div class="head">
					<div class="body">
						<div class="tx">
							<span>
								<img :src="`http://127.0.0.1/api/public/showimg/${img}`" />
							</span>
						</div>

						<el-col :span="24">
							<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
								@close="handleClose">
								<router-link to="/pc/updatepas">
									<el-menu-item index="1">
										<span slot="title">密码修改</span>
									</el-menu-item>
								</router-link>
								<router-link to="/pc/updateimg">
									<el-menu-item index="2">
										<span slot="title">个人头像修改</span>
									</el-menu-item>
								</router-link>
								<router-link to="/pc/updatexx">
									<el-menu-item index="3">
										<span slot="title">个人信息修改</span>
									</el-menu-item>
								</router-link>
								<el-menu-item index="4">
									<span slot="title">我的评论</span>
								</el-menu-item>
							</el-menu>
						</el-col>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MyXx',
		data() {
			return {
				img: ''
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		mounted() {
			this.img = localStorage.getItem('img')
		}
	}
</script>

<style scoped>
	.xx {
		margin-top: 40px;
		margin-right: 8%;
		margin-left: 8%;
		min-height: 88vh;
	}

	.head {
		margin-left: 2%;
		min-width: 200px;
		height: 100%;
		flex: 1 1 0%;
		background-color: rgb(245, 245, 245);
	}

	.body {
		border: 1px solid lightgray;
		min-width: 200px;
		height: 100%;
	}

	.body .tx {
		display: flex;
		height: 63px;
		width: 100%;
		justify-content: center;
		margin-top: 2px;
	}

	.body .tx span {
		height: 60px;
		width: 60px;
		line-height: 60px;
	}

	.body .tx span img {
		display: block;
		height: 100%;
		vertical-align: middle;
		border-radius: 50%;
	}

	.body ul {
		height: 100%;
		min-height: 75vh;
		background-color: #fff;
	}

	.body ul li a {
		color: black;
	}
</style>